@import '~styles/config.scss';

.box{
    display: flex;
    align-items: center;
}
.but {
    display: flex;
    line-height:20px;
    span {
        font-size: 14px;
        padding-left: 20px;
        border-left:1px solid $--border-color-base;
    }

    i {
        font-size: 20px;
        padding:0px 10px 0px 0px;
    }
}

.main {
    margin    : -20px -0px -10px -0px;
    height    : calc(100vh - 300px);
    overflow  : hidden;
    overflow-y: auto;
    border    : 1px solid $--border-color-lighter;

    box-sizing: border-box;
    padding   : 0px;

    .ul {
        display              : grid;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    }

    .li {
        cursor         : pointer;
        transition     : all .5s;
        background     : #fff;
        height         : 60px;
        font-size      : 24px;
        display        : flex;
        justify-content: center;
        align-items    : center;

        &:hover {
            background: $--background-color-light;
        }

        &.true {
            background: $--color-primary;
            color     : #fff;
        }
    }
}